<template>
	<view class="count">
		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="towOnreachBottom">
			<view class="topSche ">
				<image src="/static/home/sceh.png" class="sche" mode=""></image>
				<input type="text" v-model="valu" @confirm="comfig" @input="input" placeholder="请输入书籍名称进行搜索" class="inp"
					name="" id="">
			</view>
			<!-- 子元素 -->
			<view v-for="(item,index) in list" :key="index" class="m-b-10">
				<view class="item f f-a-c p-20">
					<image :src="item.cover" class="leftImg m-r-20" mode=""></image>
					<view class="rig">
						<view class="title m-b-10">
							{{item.name}}
						</view>
						<view class="botName m-b-10">
							{{item.author}}著 {{item.press}}
						</view>
						<view class="mendain m-b-10">
							门店名称：{{userinfo.profile.shop.name}}
						</view>
						<view class="mendain m-b-10">
							添加时间：{{item.created_at}}
						</view>
						<view class="mendain m-b-10">
							当前库存量：{{item.stock}}本
						</view>
					</view>
				</view>
				<!-- 入库 -->
				<view class="ruk f f-a-c f-j-f-e p-20">
					<view @click="PutIn(item)" class="storage">
						入库
					</view>
				</view>
				<view v-if="index!=list.length-1" class="xian">

				</view>
			</view>
			<!-- 这个是入库 -->
			<!-- 升级会员 -->
			<u-mask :show="showRenewVip">
				<view class="cenVip">
					<view class="p-r">
						<image src="/static/cha.png" @click="showRenewVip=false" class="cha" mode=""></image>
						<view class="tit">
							入库
						</view>
						<!--这个是input框 -->
						<input type="text" placeholder="请输入书架编号" v-model="value" class="inp1">
						<view class="inpValue">
							<image src="/static/codeImg.png" @click.stop="codeFn" class="codeImg" mode=""></image>
							<input type="text" placeholder="请输入书籍编号" v-model="value2" class="inp2" name="" id="">
						</view>
						<!-- 下面的保存 -->
						<view @click="baocun" class="comig">
							保存
						</view>
					</view>
				</view>
			</u-mask>
			<!-- 添加 -->
			<view @click="append" class="addTian">
				添加
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				list: [],
				showRenewVip: false,
				value: '',
				value2: '',
				valu: '',
				page: 1,
				total: '',
				item: {}
			}
		},
		onReachBottom() {
			if (this.total == this.list.length) {
				return
			}
			this.page++
			this.initList()
			console.log('123456');
		},
		onShow() {
			this.initList()
		},
		methods: {
			input(e) {
				console.log(e);
				if (e.detail.value == '') {
					setTimeout(() => {
						this.page = 1
						this.list = []
						this.initList()
					}, 500)
				}
			},
			comfig() {
				this.page = 1
				this.list = []
				this.initList()
			},
			async initList() {
				let n = await this.$api.StoreBooks({
					q: this.valu,
					page: this.page
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.data]
			},
			// 点击添加
			append() {
				uni.navigateTo({
					url: '/pageC/Append'
				})
			},
			towOnreachBottom() {
				console.log('123456789');
			},
			// 点击入库
			PutIn(item) {
				this.item = item
				this.showRenewVip = true
			},
			async baocun() {
				let n = await this.$api.Storage({
					shelf_no: this.value,
					book_no: this.value2
				}, this.item.id)
				this.$msg(n.message)
				if (n.status) {
					setTimeout(() => {
						this.showRenewVip = false
						this.page = 1
						this.list = []
						this.initList()
						this.value = ''
						this.value2 = ''
					}, 800)

				}
			},
			// 扫码
			codeFn() {
				uni.scanCode({
					success: (res) => {
						this.value2 = res.result
						console.log('条码类型：' + res);
						console.log('条码内容：' + res);
					}
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.addTian {
		position: fixed;
		bottom: 50rpx;
		left: 5%;
		width: 90%;
		height: 88rpx;
		line-height: 85rpx;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
	}

	.count {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		padding-bottom: 200rpx;
	}

	.comig {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #009d85;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 100rpx;
		margin-bottom: 30rpx;
	}

	.codeImg {
		position: absolute;
		z-index: 88888;
		width: 36rpx;
		height: 34rpx;
		top: 50%;
		transform: translateY(-50%);
		right: 20rpx;
	}

	.inpValue {
		position: relative;
		width: 95%;
		height: 90rpx;
		background: #ffffff;
		border: 2rpx solid #dedede;
		border-radius: 12rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding-left: 20rpx;
		margin-top: 20rpx;

		.inp2 {
			width: 100%;
			height: 100%;
		}
	}

	.inp1 {
		width: 95%;
		height: 90rpx;
		background: #ffffff;
		border: 2rpx solid #dedede;
		border-radius: 12rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding-left: 20rpx;
		margin-top: 30rpx;
	}


	.cha {
		width: 46rpx;
		height: 46rpx;
		position: absolute;
		top: -80rpx;
		right: 0;
	}

	.Records {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #999999;
		margin-top: 20rpx;

		.imgRig {
			width: 10rpx;
			height: 18rpx;
		}
	}

	.cenVi .inpVale {
		position: relative;
		width: 90%;
		height: 80rpx;
		border-radius: 20rpx;
		// background-color: pink;
		margin: 0 auto;
		box-sizing: border-box;
		margin-top: 25rpx;
		margin-bottom: 25rpx;

		.time {
			position: absolute;
			width: 28rpx;
			height: 28rpx;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);

		}

		.inp {
			height: 80rpx;
			width: 100%;
			border: 2rpx solid #dedede;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding-left: 20rpx;
		}
	}

	// p {
	// 	position: absolute;
	// 	width: 70%;
	// 	top: 50%;
	// 	left: 50%;
	// 	border-radius: 15rpx;
	// 	transform: translate(-50%, -50%);
	// 	padding: 20rpx;
	// 	background-color: #fff;

	// 	.btn {
	// 		margin: 0 auto;
	// 		width: 90%;
	// 		height: 80rpx;
	// 		background: #009d85;
	// 		border-radius: 40rpx;
	// 		text-align: center;
	// 		line-height: 80rpx;
	// 		font-size: 28rpx;
	// 		font-family: PingFang SC, PingFang SC-Bold;
	// 		font-weight: 700;
	// 		color: #ffffff;
	// 		margin-top: 50rpx;
	// 	}

	// 	.tit {
	// 		font-size: 32rpx;
	// 		font-family: PingFang SC, PingFang SC-Bold;
	// 		font-weight: 700;
	// 		text-align: center;
	// 		color: #333333;
	// 	}
	// }

	.cenVip {
		position: absolute;
		width: 70%;
		top: 50%;
		left: 50%;
		border-radius: 15rpx;
		transform: translate(-50%, -50%);
		padding: 20rpx;
		background-color: #fff;

		.btn {
			margin: 0 auto;
			width: 90%;
			height: 80rpx;
			background: #009d85;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #ffffff;
			margin-top: 50rpx;
		}

		.tit {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 600;
			text-align: center;
			color: #333333;
		}
	}

	.xian {
		height: 2rpx;
		width: 90%;
		background-color: #e6e6e6;
		margin: 0 auto;
	}

	.ruk {
		padding: 20rpx 35rpx;
	}

	.storage {
		width: 130rpx;
		height: 64rpx;
		line-height: 64rpx;
		border: 2rpx solid #009d85;
		border-radius: 34rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: center;
		color: #009d85;
	}

	.mendain {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: left;
		color: #1a1a1a;
	}

	.botName {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: #666666;
	}

	.leftImg {
		width: 164rpx;
		height: 218rpx;
		border-radius: 24rpx;
	}

	.topSche {
		margin: 0 auto;
		position: relative;
		width: 90%;
		height: 72rpx;
		background: #f6f6f6;
		border-radius: 36rpx;
		box-sizing: border-box;

		.inp {
			width: 100%;
			height: 100%;
			padding-left: 50rpx;
			box-sizing: border-box;
		}

		.sche {
			width: 24rpx;
			height: 26rpx;
			position: absolute;
			top: 50%;
			left: 20rpx;
			box-sizing: border-box;
			transform: translateY(-50%);
		}
	}
</style>